<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
/*    td:hover{
        background-color:pink;
    }*/
    tbody{border-top:3px solid #00c0ef}
    tr{border:3px solid #00c0ef}
    td{border:3px solid #00c0ef}

    #login_panel{
        width:400px;
        height:20px;
        background-color:#0C0;
        position:fixed;
    }

    .btn-on{
        border:2px solid red;
    }

/*    .dash{
        animation: loading1 1s infinite linear;
    }*/
.circle{
    margin: 20px auto;
    width: 50px;
    height: 50px;
    border: 5px white solid;
    border-left-color: #ff5500;
    border-right-color:#0c80fe;
    border-radius: 100%;
    z-index:2;
    animation: loading1 1s infinite linear;
}
@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}
</style>

<script src="{{URL::asset('js/jquery-ui.js')}}"></script>
<style link="{{URL::asset('css/jquery-ui.css')}}"></style>

<script type="text/javascript">
    $('body').on('click','.but1',function(){
        $('.but1').each(function(){
            $(this).removeClass('btn-on');
        });
        if($(this).hasClass('btn-on')){
            $(this).removeClass('btn-on');
        }else{
            $(this).addClass('btn-on');
        }
    });
    $(document).ready(function(){

        $('#start_time').datetimepicker({
            format:'HH:mm',
            showClose:true
        });

        $('#end_time').datetimepicker({
            format:'HH:mm',
            showClose:true,
            widgetPositioning:{
                horizontal: 'auto',
                vertical: 'bottom'
            }
        });
        $('#class_').prop('disabled',true);

        //初始显示周一课表
        $('#table-1').css('display','table');

        //每一格的点击事件
        $('.classes').on('click',null,function(){
            $(this).find('.circle').remove();
            var teacher_id = parseInt($(this).attr('teacher_id'));
            var crouse_id = parseInt($(this).attr('crouse_id'));
            var tutor_id = parseInt($(this).attr('tutor_id'));
            var class_id = parseInt($(this).attr('class_id'));
            if(teacher_id > 0 && crouse_id > 0){
                $('option:selected').each(function(){
                    $(this).prop('selected',false);
                });
                $('#teacher option[value="'+teacher_id+'"]').prop('selected','selected');
                $('#crouse option[value="'+crouse_id+'"]').prop('selected','selected');
                $('#tutor option[value="'+tutor_id+'"]').prop('selected','selected');
                $('#start_time').val($(this).attr('start_time'));
                $('#end_time').val($(this).attr('end_time'));
                $('#class_').prop('disabled',true);
            }

            $('#click_position').val("");
            $('#click_position').val($(this).attr('id'));

            //弹窗
            $('#myModal').modal({backdrop: 'static'});
        });

/*        $("td").on("mouseover",function(e){
            var color = new Array();
            color[0] = "#f71752";
            color[1] = "#00dd1c";
            color[2] = "#007fff";
            color[3] = "#ffff99";
            color[4] = "#e0a";

            var numb = Math.floor(Math.random()*5);
            //var color ='#'+ ('00000' + ((Math.random() * (0x00FFFF-0x001111+1)+0x001111) << 0).toString(16)).substr(-6);
            $(e.target).css("background-color",color[numb]);
        });

        $("td").on("mouseleave",function(e){
            $(e.target).css("background-color","white");
        });*/

        $('td').on('click',function(){
            var dom = document.getElementsByClassName('btn-on');
            if(dom.length > 0){
                $(this).text(dom[0].innerHTML);
                $(this).attr('crouse_id',dom[0].getAttribute('crouse_id'));
                $(this).attr('squad_id',dom[0].getAttribute('squad_id'));
                $(this).attr('tutor_id',dom[0].getAttribute('tutor_id'));
                id = $(this).attr('id');
                id.split('-');
                $(this).attr('classroom_id',id[0]);
                dom[0].parentElement.removeChild(dom[0]);
            }
        });

        //保存
        $('#btn_submit').on('click',null,function(){
            if($('#teacher').val() == 0){
                alert('教师不能为空！');
                return;
            }

            if($('#start_time').val() == ''){
                alert('开始时间不能为空！');
                return;
            }

            if($('#end_time').val() == ''){
                alert('结束时间不能为空！');
                return;
            }

            //获取section
            var section_set = $('.active');
            var section = section_set[0].id;
            var temp = section.split('-');
            section = temp[1];

            var position = $('#click_position').val();

            temp = position.split('-');

            var column=temp[1];

            var classroom_id = temp[0];
            var period = $('thead th:eq("'+column+'")').attr('id');


            var request={section:section};
            request.position = position;
            request.classroom_id = classroom_id;
            //request.crouse = $('#crouse').val();
            request.crouse = $('#table-'+section+' #'+position).attr('crouse_id');
            request.teacher = $('#teacher').val();
            //request.tutor = $('#tutor').val();
            request.tutor = $('#table-'+section+' #'+position).attr('tutor_id');
            request.memo = $('#memo').val();
            //request.class_id = $('#class_').val();
            request.class_id = $('#table-'+section+' #'+position).attr('squad_id');
            request.period = period;
            request.start_time = $('#start_time').val();
            request.end_time = $('#end_time').val();


            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
            $.post('/admin/crouse_sheet/set/save',request,function(data){
                if(data.status < 0){
                    alert(data.message);
                    $('#table-'+section+' #'+data.position[0]).append('<div class="circle"></div>');
                    $('#table-'+section+' #'+data.position[1]).append('<div class="circle"></div>');
                    $('#btn_close').click();
                    return;
                }else{
                    alert('操作成功');
                    $('#myModal').modal('hide');
                    //设置td的属性和内容
                    $('#table-'+section+' td[id="'+position+'"]').attr('crouse_id',data.data[0].crouse_id);
                    $('#table-'+section+' td[id="'+position+'"]').attr('teacher_id',data.data[0].teacher_id);
                    $('#table-'+section+' td[id="'+position+'"]').attr('tutor_id',data.data[0].tutor_id);
                    $('#table-'+section+' td[id="'+position+'"]').attr('class_id',data.data[0].squads_id);
                    $('#table-'+section+' td[id="'+position+'"]').attr('start_time',data.data[0].start_time);
                    $('#table-'+section+' td[id="'+position+'"]').attr('end_time',data.data[0].end_time);
                    var text = data.data[0].crousename+"<br/>"+data.data[0].teacher_name+"/"
                        +data.data[0].tutor_name+"<br/>"+data.data[0].classname+"&nbsp;&nbsp;&nbsp;&nbsp;"+
                        data.data[0].squad_name+'<br />'+data.data[0].start_time+'-'+data.data[0].end_time+"<br />";
                    if(data.data[0].memo == null || isNaN(data.data[0].memo) || data.data[0].memo == 'null'){
                        text += '';
                    }else{
                        text += data.data[0].memo;
                    }
                    $('#table-'+section+' td[id="'+position+'"]').html(text);

                    $('#btn_clear').click();
                }
            });
        });

        //删除
        $('#btn_delete').on('click',null,function(){
            var position =$('#click_position').val();

            var request = {position:position};

            //获取section
            var section_set = $('.active');
            var section = section_set[0].id;
            var temp = section.split('-');
            section = temp[1];

            var id = $('#table-'+section+' td[id="'+position+'"]').attr('crouse_id');
            if(typeof(id) == "undefined" || id == 0){
                alert('当前课程不需要删除');
                return;
            }

            request.section = section;

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
            $.post('/admin/crouse_sheet/set/delete',request,function(e){
                if(e.status < 0){
                    alert(e.message);
                }else{
                    alert('删除成功');
                    //移除td的属性和内容
                    $('#table-'+section+' td[id="'+position+'"]').removeAttr('crouse_id');
                    $('#table-'+section+' td[id="'+position+'"]').removeAttr('teacher_id');
                    $('#table-'+section+' td[id="'+position+'"]').removeAttr('tutor_id');
                    $('#table-'+section+' td[id="'+position+'"]').removeAttr('class_id');
                    $('#table-'+section+' td[id="'+position+'"]').html('');
                    $('#btn_close').click();
                }
            });
        });


        //上线
        $('#btn_upload').on('click',null,function(){
            if(confirm('确认要上线吗？')){
                var request={action:'upload'};
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                $.post('/admin/crouse_sheet/set/upload',request,function(data){
                    if(data.status < 0){
                        alert(data.message);
                        return;
                    }else{
                        alert('操作成功');
                    }
                });
            }
        });


        $('#tutor').on("change",null,function(){
            $('#class_ option:gt(0)').remove();
            var tutor_id = $('#tutor option:selected').val();
            if(tutor_id == 0){
                $('#class_').prop('disabled',true);
                $('#class_ option:selected').prop('selected',false);
            }else{
                //var request={tutor_id:tutor_id};

                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false,cache:true});
                $.get('crouse_sheet/get/'+tutor_id,function(data){
                    var html = ''
                    for(i=0;i<data.length;i++){
                        html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                    }
                    $('#class_').append(html);
                });
                $('#class_').prop('disabled',false);
            }
        });

        $('#btn_clear,#btn_close,#remove').on('click',null,function(){
            $('option:selected').each(function(){
                $(this).prop('selected',false);
            });
            $("#teacher option[value='0']").prop('selected','selected');
            $("#crouse option[value='0']").prop('selected','selected');
            $("#tutor option[value='0']").prop('selected','selected');
            $("#class_").prop('disabled',true);
            $("#memo").val();
            $('#start_time').data("DateTimePicker").clear();
            $('#end_time').data("DateTimePicker").clear();
        });

        $('#squad').on("change",function(){
            $('#pool').empty();
            if($(this).val() == 0){
                $('#squad option:selected').prop('selected','false');
                $('#squad option:[value=0]').prop('selected','true');
            }else if($(this).val() > 0){

                var request = {};
                request.squad = $('#squad').val();
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                $.post('set/squad',request,function(data){
                    if(data.status < 0){
                        $('#pre_tutor').val('');
                        $('#pre_tutor').attr('tutor','');
                        alert(data.message);
                        return;
                    }
                    for(t in data.data){
                        var back = '';
                        if(data.data[t].name == '单词口语课'){
                            back = 'background-color:#c0e49d';
                        }else if(data.data[t].name == '应用口语课'){
                            back = 'background-color:#fad99f';
                        }else if(data.data[t].name == '语境课'){
                            back = 'background-color:#ff9781';
                        }else if(data.data[t].name == '阅读课'){
                            back = 'background-color:#88ccff';
                        }else if(data.data[t].name == '写作课'){
                            back = 'background-color:#98efea';
                        }
                        var html = '<div class="but1 small-box col-md-3" style="height:60px;margin-left:10px;margin-right:10px;'+back+'" crouse_id="'+data.data[t].crouse_id+'" squad_id="'+data.data[t].squad_id+'" tutor_id="'+data.data[t].tutor_id+'">'+data.data[t].squad_name+'/'+data.data[t].tutor_name+'/'+data.data[t].name+'</div>';
                        $('#pool').append(html);
                    }
                    $('#pre_tutor').val(data.data[0].tutor_name);
                    $('#pre_tutor').attr('tutor',data.data[0].tutor_id);
                });
            }else if($(this).val() == 'all'){
                var request = {squad:'all'};
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                $.post('set/squad',request,function(data){
                    if(data.status < 0){
                        $('#pre_tutor').val('');
                        $('#pre_tutor').attr('tutor','');
                        alert(data.message);
                        return;
                    }
                    for(t in data.data){
                        var back = '';
                        if(data.data[t].name == '单词口语课'){
                            back = 'background-color:#c0e49d';
                        }else if(data.data[t].name == '应用口语课'){
                            back = 'background-color:#fad99f';
                        }else if(data.data[t].name == '语境课'){
                            back = 'background-color:#ff9781';
                        }else if(data.data[t].name == '阅读课'){
                            back = 'background-color:#88ccff';
                        }else if(data.data[t].name == '写作课'){
                            back = 'background-color:#98efea';
                        }
                        var html = '<div class="but1 small-box col-md-3" style="height:60px;margin-left:10px;margin-right:10px;'+back+'" crouse_id="'+data.data[t].crouse_id+'" squad_id="'+data.data[t].squad_id+'" tutor_id="'+data.data[t].tutor_id+'">'+data.data[t].squad_name+'/'+data.data[t].tutor_name+'/'+data.data[t].name+'</div>';
                        $('#pool').append(html);
                    }
                    $('#pre_tutor').val('');
                    $('#pre_tutor').attr('tutor','');
                });
            }
        });

        $('#squad').select2();
    });


    function changeTab(section){
        $('table').css('display','none');
        $('#table-'+section).css('display','table');
    }
</script>

<div id="page-wrapper">
</div>

<div id="main" style="width:400px;height:800px;position:fixed;margin:0 auto;z-index:3;background-color:white;">
   <div id="login_panel" onmousedown="mouseDown()" onmouseup="mouseUp()"></div>
    <div style="height:40px;background-color: white"></div>
    <div style="">
        <form class="">
            <div class="form-group">
                <label>班级</label>
                <select class="form-control" id="squad">
                    <option value="0">请选择</option>
                    @foreach($squads as $v)
                        <option value="{{$v['id']}}">{{$v['name']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>班主任</label>
                <input type="text" id="pre_tutor" disabled="true" tutor="">
            </div>
        </form>
    </div>
    <div style="border-top:2px solid black;width:400px;margin:0;overflow-y:scroll;height:400px;" id="pool" class="row">
{{--        <div class="small-box bg-green" id="crouse-1" style="height:80px;">1111111111</div>
        <div class="small-box bg-blue" style="height:80px">222222222</div>
        <div class="small-box bg-red" style="height:80px">333333333</div>--}}
    </div>
    <div style="text-align:center">
        <a class="btn btn-danger" id="btn_upload">上线</a>
    </div>
</div>


<div class="box box-body">
	<ul id="date_tab" class="nav nav-tabs">
		<li id="tab-1" class="active" data-toggle="tab"><a  onclick="changeTab(1)">周一</a></li>
		<li id="tab-2" data-toggle="tab"><a onclick="changeTab(2)">周二</a></li>
		<li id="tab-3" data-toggle="tab"><a onclick="changeTab(3)">周三</a></li>
		<li id="tab-4" data-toggle="tab"><a onclick="changeTab(4)">周四</a></li>
		<li id="tab-5" data-toggle="tab"><a onclick="changeTab(5)">周五</a></li>
		<li id="tab-6" data-toggle="tab"><a onclick="changeTab(6)">周六</a></li>
		<li id="tab-7" data-toggle="tab"><a onclick="changeTab(7)">周日</a></li>
	</ul>

    <div>
    @foreach($days as $day)
	<table class="table" style="display:none" id="table-{!! $day !!}">
		<thead>
		<tr>
            <?php
                for($i=0;$i<14;$i++){
                    if($i==0){
                        echo '<th></th>';
                    }else{
                        echo '<th id="'.$i.'">'.$i.'</th>';
                    }
                }
            ?>
		</tr>
		</thead>
		<tbody>
		@foreach($rows[$day-1] as $row)
			<tr>
				@foreach($row as $td)
					<td {!! $td['attribute'] !!}>
						{!! $td['content'] !!}
					</td>
				@endforeach
			</tr>
		@endforeach
		</tbody>
	</table>
    @endforeach
    </div>
</div>

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="remove"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <fieldset>
                        <div class="control-group">
                            <!-- Select Basic -->
                            <label class="control-label">教师</label>
                            <div class="controls">
                                <select class="form-control" data-live-search="true" id="teacher">
                                    <option value="0" selected>请选择</option>
                                    @foreach($teachers as $teacher)
                                    <option value="{!! $teacher->id !!}">{!! $teacher->en_name !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="control-group">
                            <!-- Select Basic -->
                            <label class="control-label">开始时间</label>
                            <div class="controls">
                                <input type="text" id="start_time" class="form-control">
                            </div>
                        </div>

                        <div class="control-group">
                            <!-- Select Basic -->
                            <label class="control-label">结束时间</label>
                            <div class="controls">
                                <input type="text" id="end_time" class="form-control">
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">备注</label>
                            <textarea class="form-control" id="memo" name="deblock_udid" rows="8" cols="10" style="min-width: 90%"></textarea>
                        </div>

                    </fieldset>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" id="btn_close" class="btn btn-default"  data-dismiss="modal">关闭</button>
                <button type="button" id="btn_clear" class="btn btn-warning">清空</button>
                <button type="button" id="btn_submit" class="btn btn-primary">保存</button>
                <button type="button" id="btn_delete" class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>
</div>
<input type="text" id="click_position" style="display:none"/>
<script type="text/javascript">

    //以下属性先不用管，等我们在下面定义方法的时候，需要用到什么属性，在来定义全局变量（属性）就可以了
    var startX;
    var startY;
    var moveSwitch = false;
    var currentLeft;
    var currentTop;
    var loginTag = document.getElementById("login_panel");
    var main = document.getElementById("main");


    document.onmousemove = function(e){　　　//定义一个方法，用来捕捉鼠标的坐标位置
        if(moveSwitch){　　　　　　　　　//类似于if(true);　　　　　　　　　　　　　　　
            var x = e.clientX;　　　　　　　　//e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标
            var y = e.clientY;　　　　　　　　//e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标
            var distanceX = x-startX;　　　　//X轴上获得移动的实际距离
            var distanceY = y-startY;　　　　　//Y轴上获得移动的实际距离
            main.style.left = (distanceX+currentLeft)+"px";　　//currentLeft下面的方法会有解释，需要注意最后要添加PX单位，如果给left赋值会破坏文档流，不加单位就会无效
            main.style.top = (distanceY+currentTop)+"px";　　//
        }
    }

    function mouseDown(e){　　　　//鼠标按下事件
        e = e?e:window.event;　　　　//因为兼容问题，event可能在隐藏参数中，如果隐藏参数没有event事件，则可以使用全局的事件window.event（大家记住写法就可以了）
        moveSwitch = true;
        startX = e.clientX;
        startY = e.clientY;
        currentLeft = loginTag.offsetLeft;　　//通过对象获取对象的坐标
        currentTop = loginTag.offsetTop;
    }
    function mouseUp(){
        moveSwitch = false;
    }

/*    $('#crouse-1').draggable({
        drag:function(event,ui){

        },
        cursor: "move"
    });

    $('td').droppable({
        drop: function (event, ui) {
            $(this).children().remove();
            var source = ui.draggable;
            source.removeAttr('style');
            source.removeAttr('id');
            source.removeClass();
            $(this).append(source);

        }
    });*/
</script>
